<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:head>
        <title>Bulls and Cows</title>
        <style type="text/css">
            <!--
            body {
                background-color: #E5E5E5;
                background-image: url(http://www.nice-one.com/wallpaper.jpg);
                background-repeat: no-repeat;
                margin-left: 10%;
                margin-top: 10%;
                margin-right: 10%;
            }
            body,td,th {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                color: #333333;
            }
            .style2 {
                color: #FFFFFF;
                font-size: 20px;
            }
            .style3 {
                color: #FFFFFF;
                font-size: 14px;
            }
            .style4 {
                font-size: 24px;
                color: #99CC00;
                font-weight: bold;
            }
            -->
        </style>
    </h:head>
    <h:body>
        <div>
            <div align="center" >
                <p align="center" class="style2 style4"> Bulls and Cows </p>
            </div>
        </div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <div style="background:#333333">
            <div align="center" class="style3" >
                <p>&nbsp;</p>
                <p class="style2"> <h:outputText escape="false"  value="#{usermanager.response}"/></p>
                <p>To Create a new game please enter how long the word should be (3-7)</p>

                <p style="color:red" > <h:message for="wordlength"  showDetail="true" tooltip="true" /> </p>

                <h:form>
                    <h:inputText id ="wordlength" size="20" maxlength="1" value="#{usermanager.wordLength}" >
                        <f:validateLongRange  minimum="3" maximum="7"/>
                    </h:inputText>
                    <h:commandButton  id="submit" value="Create New Game" action="response" />
                </h:form>
                <p>OR</p>
                <p>Join an ongoing game by entering the name of the game creator below and clicking join</p>

                <h:form>
                    <h:selectOneMenu id="selectGame"
                                     value="#{usermanager.creatorName}">
                        <f:selectItems
                            value="#{usermanager.list}" />
                    </h:selectOneMenu>
                    <h:commandButton  id="submit" value="Join" action="#{usermanager.joinGame}" />
                </h:form>


                <p>&nbsp;</p>
            </div>
        </div>
        <p>&nbsp;</p>
        <a href="faces/webclient.xhtml">Currency converter</a>
        <a href="ConverterClient">Servlet</a>


    </h:body>
</html>


